<template>
  <a-modal
    title="任期增减筛选"
    :width="700"
    :visible="visible"
    :maskClosable="false"
    :footer="null"
    @cancel="handleCancel"
  >
    <div class="table-page-search-wrapper" style="margin-top: 20px">
      <a-form-model :model="projectItem" :label-col="labelCol" :wrapper-col="wrapperCol">
        <!-- 资产负债率 -->
        <a-row>
          <a-form-model-item label="明细单价">
            <a-row :gutter="12">
              <a-col span="11" class="item_line">
                <span>±</span>
                <a-input v-model="projectItem.num" class="addandsub_input" @blur="handlerLimit($event, 'num', 'start')">
                  <a-button slot="addonAfter" class="btn_addandsub" @click="addNumber('num')" icon="plus"></a-button>
                  <a-button slot="addonBefore" class="btn_addandsub" @click="subNumber('num')" icon="minus"></a-button>
                </a-input>
                <span>%</span>
              </a-col>
            </a-row>
          </a-form-model-item>
          <a-form-model-item label="开工时间差">
            <a-row :gutter="12">
              <a-col span="11" class="item_line">
                <span>±</span>
                <a-input disabled v-model="num" class="addandsub_input" @blur="handlerLimit($event, 'num', 'start')">
                  <a-button
                    disabled
                    slot="addonAfter"
                    class="btn_addandsub"
                    @click="addNumber('num')"
                    icon="plus"
                  ></a-button>
                  <a-button
                    disabled
                    slot="addonBefore"
                    class="btn_addandsub"
                    @click="subNumber('num')"
                    icon="minus"
                  ></a-button>
                </a-input>
                <span>月</span>
              </a-col>
            </a-row>
          </a-form-model-item>
          <a-row :gutter="12" style="margin-bottom:25px">
              <a-col offset="3" span="18" class="item_line" style="justify-content: space-between;">
                <span>预算明细数量</span>
                <a-radio-group disabled v-model="value">
                  <a-radio  :value="1">
                    大于
                  </a-radio>
                  <a-radio  :value="2">
                    小于
                  </a-radio>
                  <a-radio  :value="3">
                    等于
                  </a-radio>
                </a-radio-group>
                <span>实际责任成本明细数量</span>
              </a-col>
          </a-row>
        </a-row>
        <!-- 开工时间滞后3个月 -->
      </a-form-model>
    </div>
    <a-row :gutter="24">
      <a-col :span="8" :offset="8">
        <div class="btn_position">
          <a-button type="primary" @click="save">保存</a-button>
          <a-button @click="handleCancel" style="margin-left: 20px">取消</a-button>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
export default {
  name: 'ItemsOfIndicator',
  data() {
    return {
      visible: false,
      projectItem: {},
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      value: 1,
      num: 3
    }
  },
  methods: {
    save() {
      let projectJson = JSON.stringify(this.projectItem)
      this.$emit('save', projectJson)
      this.visible = false
    },
    edit(projectItem) {
      this.projectItem = projectItem
      console.log(this.projectItem)
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    handlerLimit(event, mysite, type) {
      let value = Number(event.target.value)
      console.log(value)
      if (type == 'start') {
        if (isNaN(value)) {
          this.projectItem[mysite] = 0
          return
        }
      } else if (type == 'end') {
        if (isNaN(value)) {
          this.projectItem[mysite] = 1
          return
        }
      }
      this.projectItem[mysite] = value
    },
    addNumber(mysite) {
      let num = Number(this.projectItem[mysite]) + 1
      this.projectItem[mysite] = num
    },
    subNumber(mysite) {
      let num = Number(this.projectItem[mysite]) - 1
      this.projectItem[mysite] = num < 0 ? 0 : num
    }
  }
}
</script>

<style lang="less" scoped>
.btn_position {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item_line {
  display: flex;
  align-items: center;
}
.addandsub_input {
  width: 130px;
  /deep/ .ant-input-group-addon {
    padding: 0;
  }
  /deep/ .ant-input-group {
    width: 125px;
  }
  .btn_addandsub {
    height: 30px;
    width: 25px;
    padding: 0;
    border-color: #f9f9f9;
    background-color: #f9f9f9;
    .add {
    }
  }
}
</style>
